<!DOCTYPE html>
<html lang="zh-en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>高强度活动页面构建搭建与规范 | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






<div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
<div class="container">
  <h2 class="subtitle is-6">April 24, 2018</h2>
  <h1 class="subtitle is-size-4-mobile is-size-3-desktop">高强度活动页面构建搭建与规范</h1>
  <div class="content">
    

<p>结构（HTML）、表现（CSS）、行为分离（JavaScript）. 将结构与表现、行为分离，保证它们之间的最小耦合，这对前期开发和后期维护都至关重要。</p>

<h1 id="开发必有规范">开发必有规范</h1>

<ol>
<li>基于现有的框架做出的约束与开发流程约定。（如：公司架构师针对公司特效开发的工作流管理框架。）</li>
<li>基于技术特征展开的约定。（如：css 选择器使用，层级使用，书写顺序，浏览器兼容等。js 逻辑处理。jQuery，zepto 的使用）</li>
<li>布局，组件等规范。</li>
</ol>

<p>Note：语法，命名等的规范是一种习惯和修养，最基础也最实用。</p>

<h2 id="javascript-jquery-zepto-规范-一下-jquery-规则-同样适用于-zepto">JavaScript, jQuery, Zepto 规范 （一下 jQuery 规则 同样适用于 Zepto）</h2>

<ul>
<li>建议使用 eslint 做约束处理，但是前期对工作效率影响比较大，有一定的适应过程。</li>
</ul>

<p>重点：命名规则</p>

<ul>
<li>变量 使用 Camel命名法。 <code>let initStat = {};</code></li>
<li>常量 使用 全部字母大写，单词间下划线分隔 的命名方式。 <code>const VIDEO_STAT = {};</code></li>

<li><p>函数 使用 Camel命名法。</p>

<pre><code class="language-js">    function getData() {

    }
</code></pre></li>

<li><p>类 使用 Pascal命名法。</p>

<pre><code class="language-js">    class HelloWorld() {

    }
</code></pre></li>

<li><p>jQuery 变量 <code>$</code> 符号的使用： jQuery 对象实例化对象的时候 统一使用 <code>$</code> 开头。表示与普通 javascript 变量做区分。 如：</p>

<pre><code>    let $view = $('.view')
</code></pre></li>

<li><p>[建议] boolean 类型的变量使用 is 或 has 开头。</p>

<pre><code class="language-js">    let isReady = false;
    let hasData = false;
</code></pre></li>

<li><p>[建议] Promise对象 用 动宾短语的进行时 表达。</p>

<pre><code class="language-js">    var loadingGifts = ajax.get('/api/gifts');
    loadingGifts.then(callback);   
</code></pre></li>
</ul>

<ol>
<li>变量产量的使用：<code>let</code>, <code>const</code> (es6 to es5)</li>
<li>页面初始化处理：

<ol>
<li>初始化属性值。</li>
<li>初始化所有 dom 事件。 处理好事件委托。</li>
</ol></li>
<li>作代码之间空行, 逻辑判断书写规则，双引号，分号等使用。（由编辑器统一处理）</li>
<li>逻辑与或，大小，运算，类型转换等概念解析, 循环，递归处理。</li>
<li>数组的增删改查。</li>
<li>字符串的增删改查。</li>
<li>对象的增删改查，引用，传递，拷贝。（lodash.js）</li>
<li>模块化。虽然活动多数是单页面，但是做好模块化依然很有必要，减少代码量，提炼公用方法，公用布局方式等。</li>
</ol>

<h2 id="html-书写规范-建议-使用-pug-开发html">html 书写规范(建议 使用 pug 开发html)</h2>

<p><img src="../../images/test/pug.png" alt="css-sort" /></p>

<ol>
<li>禁止使用 id</li>
<li>class 必须单词全字母小写，单词间以 - 分隔。</li>
<li>class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。</li>
<li>属性名必须使用小写字母。</li>
<li>属性值必须用双引号包围。</li>
<li>布尔类型的属性，建议不添加属性值。</li>
<li>自定义属性统一使用 <code>data-</code>。</li>
<li>标签语义化。</li>
</ol>

<p>Note: 建立统一的命名规则系统(可以参照 bootstrap)如：<code>a.btn.btn-submit</code>  <code>.nav.nav-menu</code></p>

<h2 id="css-规范">css 规范</h2>

<h3 id="文件命名">文件命名</h3>

<ul>
<li>CSS页面文件，其文件名必须与HTML文件名一致； 如：<code>index.css</code></li>
<li>层级嵌套不得超过4层。</li>
</ul>

<h3 id="书写顺序">书写顺序</h3>

<ol>
<li>定位，布局等决定位置。</li>
<li>盒模型属性 高宽。</li>
<li>content 属性设置，文字，颜色，border，shadow。</li>
<li>transform transition等。</li>
</ol>

<p><img src="../../images/test/css-sort.png" alt="css-sort" /></p>

<p><img src="../../images/test/css-sort2.png" alt="css-sort" /></p>

  </div>
</div>
<div class="container has-text-centered">
    
</div>

<div class="container has-text-centered">
  
</div>
<section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


